// 角色素材选择窗口
import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
import VM from 'scratch-vm';
import classNames from 'classnames';
import Filter from '../components/filter/filter.jsx';
import Divider from '../components/divider/divider.jsx';
import TagButton from './tag-button.jsx';
import Spinner from '../components/spinner/spinner.jsx';
import LibraryItem from './library-item.jsx';
import randomizeSpritePosition from '../lib/randomize-sprite-position';
import Modal from './modal.jsx'; // 选择窗口组件
import {getSpriteLibrary} from '../session-api';
import newSprite from '../lib/libraries/sprite.js';
import styles from './project-library.css';

class SpriteLibrary extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'handleClose',
            'handleFilterChange',
            'handleFilterKeyUp',
            'handleFilterClear',
            'handleTagClick',
            'handleOnScroll',
            'handleItemSelect',
            'setFilteredDataRef',
            'handleGetMoreItem'
        ]);
        this.state = {
            isSearch: false, // 开始搜索
            isEnterSearched: false, // 是否已经通过回车搜索过：在未回车搜索过时，直接清空搜索框时，不必去取分类的全部
            filterQuery: '',
            selectedTag: 0,
            tagList: [], // 分类标签
            itemList: [], // itemList.length 已获取的背景数，用于流方式加载
            isOver: false, // 是否已获取了分类下的全部背景
            loading: true // 是否已加载完
        };
    }
    componentWillMount (){
        this.getItemList(true, 1); // 加载完后，第一次获取背景列表

    }
    componentDidUpdate (prevProps, prevState) {
        if (prevState.selectedTag !== this.state.selectedTag || this.state.isSearch) {
            this.getItemList(true, 0);
        }
    }
    // 获取背景列表:newList：新列表， newTag：1:同时获取分类数据
    getItemList (newList, newTag) {
        // console.info("当前状态值：", this.state);
        if (newList) { // 只有滚动到底时，才不清空已获取的背景列表
            this.setState({itemList: [], isOver: false});
        }

        if (this.state.isSearch) {
            this.setState({isSearch: false});
        }

        if (this.state.isOver) {
            return;
        }
        
        // 组件获取条件 tag：是否获取分类; f: 搜索字符串; t: 分类; l: 已经获取个数; n: 每次获取个数，默认为32个
        const searchParam = `tag=${newTag}&&f=${this.state.filterQuery}&&t=${this.state.selectedTag}&&l=${this.state.itemList.length}&n=32`;
        getSpriteLibrary(searchParam).then(res => {
            this.setState({loading: false});
            
            if (1 == newTag) {
                this.setState({tagList: res.tags});
            }

            if (res.data.length < 32) {
                this.setState({isOver: true});
            }

            // 解析数据
            var spriteList=[];
            res.data.map((item, index)=>{
                let json = JSON.parse(item.json);
                json.name = item.name;
                spriteList.push(json);
            });

            if (newList){
                this.setState({itemList: spriteList});
            } else {
                this.setState({itemList: this.state.itemList.concat(spriteList)});
            }
            // console.error('getSpriteLibrary', this.state.itemList);
        });
    }

    
    // 关闭窗口
    handleClose () {
        this.props.onRequestClose();
    }

    // 切换标签
    handleTagClick (id) {
        if (this.state.selectedTag != id){
            this.setState({filterQuery: '', isEnterSearched: false, selectedTag: id, itemList: [], isOver: false, loading: true});
        }
    }

    // 搜索：输入字符串
    handleFilterChange (event) {
        this.setState({filterQuery: event.target.value});
    }
    // 搜索：按回车时开始搜索
    handleFilterKeyUp (event) {
        if (event.keyCode === 13 && event.target.value.length > 0) {
            this.setState({isSearch: true, isEnterSearched: true, itemList: [], isOver: false, loading: true}); // 触发搜索
        }
    }
    // 搜索：清空字符串
    handleFilterClear () {
        this.setState({filterQuery: ''});
        if (this.state.isEnterSearched) { // 在未回车搜索过时，直接清空搜索框时，不必去取分类的全部
            this.setState({isSearch: true, isEnterSearched: false, itemList: [], isOver: false, loading: true});
        }
    }

    // 绑定组件变量，为监听页面滚动
    setFilteredDataRef (ref) {
        this.filteredDataRef = ref;
    }
    // 监听页面滚动，到底后，再次自动加载背景
    handleOnScroll () {
        // console.error('。。。');
        if (this.filteredDataRef) {
            const contentScrollTop = this.filteredDataRef.scrollTop; // 滚动条距离顶部
            const clientHeight = this.filteredDataRef.clientHeight; // 可视区域
            const scrollHeight = this.filteredDataRef.scrollHeight; // 滚动条内容的总高度
            if ((contentScrollTop > 0) && ((contentScrollTop + clientHeight) >= scrollHeight)) {
                if (!this.state.isOver) {
                    this.getItemList(false, 0); // 继续获取数据的方法
                }
                // console.error('已到底');
            }
        }
    }
    // 手动点击按钮，继续获取数据的方法
    handleGetMoreItem () {
        if (!this.state.isOver) {
            this.getItemList(false, 0);
        }
    }


    // 选中素材
    handleItemSelect (index) {
        this.handleClose();
        const item = this.state.itemList[index];

        const sprite = newSprite;
        randomizeSpritePosition(sprite); // 给一个随机的位置
        sprite.name = item.name;
        sprite.costumes = item.costumes;
        sprite.sounds = item.sounds;

        this.props.vm.addSprite(JSON.stringify(sprite)).then(() => {
            // console.error("ok");
            this.props.onActivateBlocksTab();
        });

    }

    render () {
        return (
            <Modal
                fullScreen
                contentLabel="选择一个角色"
                id="spriteLibrary"
                onRequestClose={this.handleClose}
            >

                {/* 搜索、分类部分 */}
                <div className={styles.filterBar}>
                    <Filter
                        className={classNames(styles.filterBarItem, styles.filter)}
                        filterQuery={this.state.filterQuery}
                        inputClassName={styles.filterInput}
                        placeholderText="搜索"
                        onChange={this.handleFilterChange}
                        onClear={this.handleFilterClear}
                        onKeyUp={this.handleFilterKeyUp}
                    />

                    <Divider className={classNames(styles.filterBarItem, styles.divider)} />

                    <div className={styles.tagWrapper}>
                        {[{tag: "全部", id: 0}].concat(this.state.tagList).map((tag, index) => (
                            <TagButton
                                active={this.state.selectedTag === tag.id}
                                className={classNames(styles.filterBarItem, styles.tagButton)}
                                key={`tag-button-${index}`}
                                onClick={()=>this.handleTagClick(tag.id)}
                                tag={tag.tag}
                            />
                        ))}
                    </div>
                </div>

                <div
                    className={classNames(styles.libraryScrollGrid, styles.withFilterBar)}
                    ref={this.setFilteredDataRef}
                    onScrollCapture={this.handleOnScroll}
                >
                    {this.state.loading ? (
                        <div className={styles.spinnerWrapper}>
                            <Spinner
                                large
                                level="primary"
                            />
                        </div>
                    ) : (<>
                        {(this.state.itemList.length == 0)&&(
                            <div className={styles.spinnerWrapper}>
                                <div className={styles.spanBox}>空</div>
                            </div>
                        )}
                        
                        {this.state.itemList.map((item, index) => (
                            <LibraryItem
                                iconMd5={item.costumes[0].md5ext}
                                id={index}
                                key={item.name}
                                name={item.name}
                                icons={item.costumes}
                                onSelect={()=>this.handleItemSelect(index)}

                                // 必须传入一个函数体，才能动画演示角色的各个造型
                                onMouseEnter={()=>{}}
                                onMouseLeave={()=>{}}
                            />
                        ))}

                        {!this.state.isOver && (
                            <div
                                className={styles.spinnerWrapper1}
                                onClick={this.handleGetMoreItem}
                            >
                                <div className={styles.spanBox}>点我可继续</div>
                            </div>
                        )}
                    </>)}
                </div>
            </Modal>
        );
    }
}

SpriteLibrary.propTypes = {
    onActivateBlocksTab: PropTypes.func.isRequired,
    onRequestClose: PropTypes.func,
    vm: PropTypes.instanceOf(VM).isRequired
};

export default SpriteLibrary;
